<template>
  <div class="choose">
    <el-card class="box-card">
      <div class="chose-time">
        <!-- 其实年份 -->
        <div class="time-item">
          <span>起始年份</span>
          <div class="block">
            <el-date-picker
              v-model="startYear"
              type="year"
              placeholder="起始年份"
              class="picker"
            >
            </el-date-picker>
          </div>
        </div>
        <!-- 结束年份 -->
        <div class="time-item">
          <span>结束年份</span>
          <div class="block">
            <el-date-picker
              v-model="endYear"
              type="year"
              placeholder="结束年份"
              class="picker"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <el-popover
          placement="right"
          width="400"
          trigger="click">
          <div class="table-container" v-if="result.length > 0">
            <table>
              <thead>
                <tr>
                <th>河流名</th>
                <th>面雨量年总值</th>
                <th>多年平均值</th>
                <th>当年距平值</th>
                </tr>
            </thead>
              <tbody>
                <tr v-for="item in result" @click.stop="handleRowClick(item)">
                <td>{{ item.riverName }}</td>
                <td>{{ item.averagePrecipitation }}</td>
                <td>{{ item.annualPrecipitation }}</td>
                <td>{{ item.anomaly }}</td>
                </tr>
              </tbody>
          </table>
    </div>
      <!-- <el-button slot="reference">click 激活</el-button> -->
      <el-button type="primary" @click="query" slot="reference" class="query">查询</el-button>
    </el-popover>
      <!-- <div class="query">
        <el-button type="primary" @click="query">查询</el-button>
      </div> -->
      <!-- <div class="table-container" v-if="result.length > 0">
    <table>
        <thead>
            <tr>
                <th>河流名</th>
                <th>面雨量年总值</th>
                <th>多年平均值</th>
                <th>当年距平值</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in result" @click.stop="handleRowClick(item)">
                <td>{{ item.riverName }}</td>
                <td>{{ item.averagePrecipitation }}</td>
                <td>{{ item.annualPrecipitation }}</td>
                <td>{{ item.anomaly }}</td>
            </tr>
        </tbody>
    </table>
    </div> -->
    </el-card>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import moment from "moment";
import {
  getRiverAnnualClimateStatistics,
  getRiverDetialById,
} from "@/api/zhjcright";
export default {
  name: "ClimateSum",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      startYear: null,
      endYear: null,
      result: [],
    };
  },
  computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {
    async query() {
      const options = {};
      if (this.startYear) {
        options.beginTime = moment(this.startYear).format("YYYY");
      }
      if (this.endYear) {
        options.endTime = moment(this.endYear).format("YYYY");
      }
      options.riverName = this.riverName;
      const res = await getRiverAnnualClimateStatistics(options);
      if (res.code != 200) {
        this.$message.error("服务请求失败");
        return;
      }
      if (res.data.length == 0) {
        this.$message.error("没有该河流的信息");
        return;
      }
      res.data.forEach((item) => {
        //当年距平值
        if (item.anomaly == null) {
          item.anomaly = 0;
        } else {
          item.anomaly = item.anomaly.toFixed(2);
        }
        //多年降水量均值
        if (item.averagePrecipitation == null) {
          item.averagePrecipitation = 0;
        } else {
          item.averagePrecipitation = item.averagePrecipitation.toFixed(2);
        }
        //本年降水量
        if (item.annualPrecipitation == null) {
          item.annualPrecipitation = 0;
        } else {
          item.annualPrecipitation = item.annualPrecipitation.toFixed(2);
        }
        //ji算过去一年的距平值
        const lastYear = this.getYearLast(1);
        let lastAnomaly = item.anomalys[lastYear];
        if(lastAnomaly){
          lastAnomaly = lastAnomaly.toFixed(2);
        }else{
          lastAnomaly = 0;
        }
        item.lastAnomaly = lastAnomaly;
        //计算过去10年的距平值
        const lastTenYear = this.getYearLast(10);
        let lastTenAnomaly = item.anomalys[lastTenYear];
        if(lastTenAnomaly){
          lastTenAnomaly = lastTenAnomaly.toFixed(2);
        }else{
          lastTenAnomaly = 0;
        }
        item.lastTenAnomaly = lastTenAnomaly;
      });
      // console.log(res.data);
      this.result = res.data;
    },
    handleRowClick(row) {
      this.$emit("showDialog", row);
    },
    getYearLast(n){
      let currentDate = new Date();
      let pastYearDate = new Date(currentDate);
      pastYearDate.setFullYear(pastYearDate.getFullYear() - n);
      // 处理闰年2月29日的情况
      if (currentDate.getMonth() === 1 && currentDate.getDate() === 29) {
        if (!this.isLeapYear(pastYearDate.getFullYear())) {
        pastYearDate.setDate(pastYearDate.getDate() - n);
        }
      }
      return pastYearDate.toISOString().split('T')[0].split("-")[0];
    },
    // 判断是否是闰年的函数
    isLeapYear(year) {
      return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    }
  },
};
</script>

<style lang="scss" scoped>
.choose {
  background-color: rgba(13, 40, 53, 0.4);
  z-index: 10;
  .box-card {
    width: 100%;
    height: 11rem;
    overflow:auto;
    background-color: rgba(13, 40, 53, 0.4);
    border: none;
    overflow: hidden;
    .chose-time {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      .time-item {
        display: flex;
        span {
          color: white;
        }
        .block {
          .picker {
            width: 100%;
            border: none;
            height: 35px;
            ::v-deep .el-range-input {
              border: none;
            }
          }
        }
      }
    }
  }
  .chose-river {
    // margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    span {
      color: white;

      //   width: 20%;
    }
  }
  .query {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0);
    // width: 100%;
    height: 40px;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .climate-list {
    margin-top: 0.5rem;
    width: 100%;
    // overflow: hidden;
    overflow-y: scroll;
    li {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-top: 1px solid #487397;
      background-color: #1f4462;
      //   margin-top: 1rem;
      &:hover {
        cursor: pointer;
      }
      span {
        color: white;
      }
      &:last-child {
        border-bottom: 1px solid #487397;
      }
    }
  }
}
.select {
  width: 80%;
  outline: none;
  border: none;
  border-radius: 2px;
  background-color: #3c6485;
  height: 30px;
  padding: 2px 5px;
}
.warp {
  overflow: hidden;
}
::v-deep .el-input__inner {
  background-color: #3c6484;
  color: white;
  border: none;
}
.start-time ::v-deep .el-input__inner {
  width: 18rem;
  background-color: #3c6484;
  color: white;
}

.table-container {
  background-color: #3C6484;
        margin-top: 10px;
        height: 100px; /* 设置容器高度以限制表格的显示区域 */
        overflow-y: auto; /* 允许容器内的内容垂直滚动 */
        position: relative; /* 为 sticky 定位创建参考上下文 */
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    tbody tr{
      border: 1px solid white;
      cursor: pointer;
    }
    th, td {
        border: none;
        padding: 2px;
        text-align: center;
        color: white;
    }
    thead th {
        color: white;
        position: sticky;
        font-weight: 100;
        /* 使用 sticky 定位 */
        top: 0; /* 固定在顶部 */
        background-color: #3C6484; /* 可选：为了更清晰的视觉区分 */
    }
    thead tr{
      height: 20px;
      border: 1px solid white;
    }
.table-before{
  height: 1px;
  width: 100%;
  background-color: #3C6484;
}
// ::v-deep el-table__body-wrapper{
//   background-color: #3c6484;
// }
// ::v-deep .el-table__body{
//   background-color: #3c6484;
// }
// ::v-deep .el-table{
//   background-color: #3c6484;
//   border: 1px solid #3c6484;
//   color: white
// }
// ::v-deep .el-table th.el-table__cell{
//   background-color: #3c6484;
// }
</style>
